<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="day001"></div>
<script src="vue.js"></script>
<script>
    const MyRenderer = {
        // 创建元素节点
        createElement(tagName) {
            return document.createElement(tagName)
        },
        // 创建文本节点
        createTextNode(text) {
            return document.createTextNode(text)
        },
        // 插入子节点
        appendChild(node, child) {
            node.appendChild(child)
        },
        // 设置元素属性
        setElementText(node, text) {
            node.textContent = text
        },
        // 设置元素属性
        setElementAttribute(node, key, value) {
            node.setAttribute(key, value)
        },
        // 为元素添加事件监听器
        addEventListener(node, eventName, handler) {
            node.addEventListener(eventName, handler)
        }
    }

    const vm = new Vue({
        data: {
            message: 'Hello, World!'
        },
        // 使用自定义渲染器
        renderer: MyRenderer,
        // 渲染函数
        render(createElement) {
            // 创建一个根元素
            const root = createElement('div')

            // 创建一个h1元素，并设置文本内容和class属性
            const h1 = createElement('h1', { class: 'title' }, this.message)

            // 创建一个按钮元素，并添加点击事件
            const button = createElement('button', {
                on: {
                    click: () => {
                        this.message = 'Vue is awesome!'
                    }
                }
            }, 'Click me!')

            // 将h1元素和按钮元素添加到根元素中
            root.appendChild(h1)
            root.appendChild(button)

            // 返回根元素
            return root
        }
    })

    // 手动挂载Vue实例到DOM节点上
    vm.$mount('#day001')
</script>
</body>
</html>
